<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>

	<body>
		<pre>
			
			在 vue 中，如果想对一个数组进行遍历，需要使用 v-for
			=>  v-for="item in arr"
			<!-- item  指数组的每一项，item 后面有一个关键字 in，in 后面是需要遍历的数组或对象 -->
			<!-- :key 的作用：给元素添加唯一标识，加上标识后，就能记录当前元素的一些状态 -->
			<!-- 以后只要使用 v-for ，建议都加上 key ，除了是一个唯一标识，还能够通过渲染的效率 -->
			<!-- 注意：item 在前， index 在后 -->
		 </pre>

		<div id="app">
			<!-- 
				item  指数组的每一项
				item 后面有一个关键字 in
				in 后面是需要遍历的数组或对象 
			-->
			<p v-for="item in arr">{{ item }}</p>

			<!-- :key 的作用：给元素添加唯一标识，加上标识后，就能记录当前元素的一些状态 -->
			<!-- 以后只要使用 v-for ，建议都加上 key ，除了是一个唯一标识，还能够通过渲染的效率 -->
			<!-- 注意：item 在前， index 在后 -->
			<p v-for="(item, index) in arr" :key="index">{{ item }}</p>

			<div v-for="(item, index) in newArr">
				<p>
					<span>-----------</span>
					<span>{{ item.name }}</span>
					<span>{{ item.age }}</span>
				</p>
			</div>

			<!-- <p v-for="(item, index) in newArr">
				{{ index }} -- {{ item.id }}、姓名：{{ item.name }}、年龄：{{ item.age}}
			</p> -->
		</div>

		<script src="/scripts/vue.js"></script>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					arr: ['Tom', 'Jerry', 'spiky', 'tyke'],
					newArr: [
						{ id: 1, name: 'Tom', age: 10 },
						{ id: 2, name: 'Jerry', age: 6 },
						{ id: 3, name: 'spiky', age: 3 },
						{ id: 4, name: 'tyke', age: 13 },
					],
				},
				methods: {},
			})
		</script>
	</body>
</html>
